import React, {Component} from 'react';
import {base, high} from 'nc-lightapp-front';

const {NCDatePicker, NCButton, NCSelect, NCInput, NCCheckbox} = base;
import {MyMonthPicker} from "../MyDatePicker"
import LeaveRefer from 'src/hrkq/refer/kqref/LeaveTypeGridRef';
import TripRefer from 'src/hrkq/refer/kqref/TripTypeGridRef/index.js';

const NCOption = NCSelect.NCOption;
import moment from 'moment';
import {getCurMonthEnd, getCurMonthStart, getCurMonth} from '../../util/util.js';
import './index.less';

export default class SearchCom extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchVal: '',
            beginDate: getCurMonthStart(),
            endDate: getCurMonthEnd(),
            monthDate: moment().format('YYYY-M'),
            pk_leave_type: {},
            report: '',
            tripType: {},
            schemeId:'',
            approveStatus: '',
            attendanceStatus:['all','1','2'],
            triptypeid: '',
            isrevoked: '',
            headerSearch:{},
            isIncludeDisabledDept:false,
            billSource: '',
            jobVal: '',
            isIncludeSub: true
        }
    }

    render() {
        const {
            format = 'YYYY-MM-DD',
            startPlaceholder = '',
            endPlaceholder = '',
            showTime = false,
            type,
            defaultOptionValue,
            deptOptions,
            dataSource = [],
            defaultDeptData,
            onDeptChange,
            showExport,
            schemeList,
            deptStat,
            deptStr

        } = this.props;
        let {
            searchVal,
            beginDate,
            endDate,
            monthDate,
            jobVal,
            attendanceStatus,
            pk_leave_type,
            isrevoked,
            isIncludeDisabledDept,
            approveStatus,
            report,
            headerSearch,
            tripType,
            triptypeid,
            billSource,
            isIncludeSub
        } = this.state
        let orderStatusList = this.getOrderStatusList()
        let attendanceStatusList = this.getAttendanceStatusList()
        return (
            
            <div className="deptStat_search">
                { 
                deptStr &&
                 <NCSelect
                 value={defaultDeptData||['all']}
                    multiple={true}
                    showSearch={true}
                    placeholder={deptStat.lang['hrkq-0000049']}
                    supportWrite={true}
                    optionFilterProp="children"
                    style={{width: 130,minWidth:130, marginRight: 6}}
                    onChange={onDeptChange}
                >
                    {
                        deptOptions.map(opt => {
                            return (
                                <NCOption className={'deptStat_search_option'} value={opt.id}>{opt.name}{opt.name2?'-'+opt.name2:''}</NCOption>
                            )
                        })
                    }
                </NCSelect>}
                <NCCheckbox defaultChecked={true}
                            style={{marginRight:'10px'}}
                            onChange={this.checkChanged}
                            checked={isIncludeSub}>
                    {deptStat.lang['hrkq-0000131']}{/* 包含下级 */}
                </NCCheckbox>
                {
                    (type === 'one'||type==='range') &&
                    <div style={{width: '130px', marginRight: '10px', lineHeight: '25px', float: 'left'}}>
                        <NCSelect
                            // value={headerSearch.billsource}
                            value={this.state.schemeId?this.state.schemeId:schemeList.length&&schemeList[0].id}
                            showClear={false}
                            placeholder={deptStat.lang['hrkq-0000148']||'假勤方案'}
                            style={{
                                width: '130px'
                            }}
                            onSelect={
                                this.headerChange('plan')
                            }
                        >
                            {schemeList.map((item) => {
                                return (
                                    <NCOption
                                        key={item.id}
                                    >
                                        {item.name}
                                    </NCOption>
                                );
                            })}
                        </NCSelect>
                    </div>
                }
                {
                    type !== 'one' && <React.Fragment>
                        <NCDatePicker
                            showTime={showTime}
                            style={{width:130}}
                            format={format}
                            value={beginDate}
                            onChange={this.onBeginDateChange}
                        />
                        <span class="separator"></span>
                        <NCDatePicker
                            showTime={showTime}
                            format={format}
                            style={{width:130}}
                            value={endDate}
                            onChange={this.onEndDateChange}
                        />
                    </React.Fragment>
                }
                {
                    type === 'one' && <div style={{width: 130,height:'26px', marginLeft: 10}}>
                    <React.Fragment>
                        <MyMonthPicker
                            style={{width:'130px',height:'26px'}}
                            defaultValue={moment()}
                            format="YYYY-M"
                            onChange={this.onMonthChange}
                        />
                    </React.Fragment>
                    </div>
                }
                <div style={{width: 130, marginLeft: 10}}>
                    <NCInput placeholder={deptStat.lang['hrkq-0000125']}
                            //  style={{width: 150}}
                             value={searchVal}
                             showClose={true}
                             onChange={this.changeSearch}/>{/* 国际化处理： 姓名/编号*/}
                </div>
                {
                    type === 'leave' && <div style={{width: '130px', marginLeft: '10px', float: 'left'}}>
                        <LeaveRefer
                            value={
                                pk_leave_type
                                // 请假类型
                            }
                            onChange={
                                this.headerChange('leave')
                            }
                        />
                    </div>
                }

                {
                    type === 'leave' && <div style={{width: '130px', marginLeft: '10px', float: 'left'}}>
                        <NCSelect
                            // value={headerSearch.billsource}
                            showClear={false}
                            placeholder={deptStat.lang['hrkq-0000136']||'单据来源'}
                            style={{
                                width: '130px'
                            }}
                            onSelect={
                                this.headerChange('source')
                            }
                        >
                            <NCOption></NCOption>
                            {dataSource.map((item) => {
                                return (
                                    <NCOption
                                        key={item.key}
                                    >
                                        {item.label}
                                    </NCOption>
                                );
                            })}
                        </NCSelect>
                    </div>
                }
                {/* {
                    type === 'range' && <div style={{width: '150px', marginLeft: '10px', float: 'left'}}>
                        <NCSelect
                            value={attendanceStatus}
                            showClear={false}
                            placeholder={'出勤状态'}
                            multiple={true}
                            style={{
                                width: '150px'
                            }}
                            onChange={
                                this.headerChange('attendanceStatus')
                            }
                        >
                            {attendanceStatusList.map((item) => {
                                return (
                                    <NCOption
                                        key={item.key}
                                    >
                                        {item.label}
                                    </NCOption>
                                );
                            })}
                        </NCSelect>
                    </div>
                } */}
                {type === 'leave' && <div style={{width: '130px', marginLeft: '10px', float: 'left'}}>
                        <span className="top-applyStatus">
                            <NCSelect
                                // multiple={true}
                                showClear={false}
                                style={{
                                    width: '130px'
                                }}
                                placeholder={deptStat.lang['hrkq-0000049']||'全部'}
                                onChange={this.headerChange('approve')}
                                // value={agreementTypeId}
                            >
                                {orderStatusList.map((item) => {
                                    return (
                                        <NCOption
                                            key={item.key}
                                        >
                                            {item.label}
                                        </NCOption>
                                    );
                                })}
                            </NCSelect>
                        </span>
                </div>}
                {
                    type === 'trip' && <div style={{width: '130px', marginLeft: '10px', float: 'left'}}>
                        <TripRefer
                            value={
                                tripType
                            }
                            placeholder={deptStat.lang['hrkq-0000138']||"出差类别"}
                            onChange={
                                this.headerChange('trip')
                            }
                        />
                    </div>
                }
                {
                    type === 'trip' &&
                    <div style={{width: '130px', marginLeft: '10px', lineHeight: '25px', float: 'left'}}>
                        <NCSelect
                                        placeholder={deptStat.lang['hrkq-0000139']}  //单据来源
                                        style={{
                                            width: '130px'
                                        }}
                                        onSelect={
                                            this.headerChange('isrevoked')
                                        }
                                    >
                                         <NCOption></NCOption>
                                                <NCOption
                                                    key={true}
                                                >
                                                    {deptStat.lang['hrkq-0000082']}
                                                </NCOption>
                                                <NCOption
                                                    key={false}
                                                >
                                                    {deptStat.lang['hrkq-0000083']}
                                                </NCOption>
                                    </NCSelect>
                    </div>
                }
                {
                    type === 'leave' &&
                    <div style={{width: '130px',minWidth:'80px', marginLeft: '10px', lineHeight: '25px', float: 'left'}}>
                        <NCSelect
                                        placeholder={deptStat.lang['hrkq-0000137']}  //单据来源
                                        style={{
                                            width: '130px'
                                        }}
                                        onSelect={
                                            this.headerChange('report')
                                        }
                                    >
                                         <NCOption></NCOption>
                                                <NCOption
                                                    key={true}
                                                >
                                                    {"是"}
                                                </NCOption>
                                                <NCOption
                                                    key={false}
                                                >
                                                    {'否'}
                                                </NCOption>
                                    </NCSelect>
                    </div>
                }
                {
                    (type === 'one'||type==='range') &&
                   <div style={{width: '150px', marginLeft: '10px', lineHeight: '25px', float: 'left'}}>
                        <span style={{marginRight:'5px'}}>{deptStat.lang['hrkq-0000149']||'是否包含撤销部门'}:</span><NCCheckbox checked={isIncludeDisabledDept} onChange={
                        this.headerChange('isIncludeDisabledDept')
                    }/>
                    </div>

                }

                <div className={'btn-group'}>
                    <NCButton shape="border"
                              colors="primary"
                              onClick={() => this.onSearch(true)}>{deptStat.lang['hrkq-000004']}{/* 国际化处理： 查询*/}</NCButton>
                    {showExport && <NCButton shape="border"
                                             onClick={this.onExport}>{deptStat.lang['hrkq-0000085']}{/* 国际化处理： 导出*/}</NCButton>}
                </div>

            </div>
        );
    }
    getAttendanceStatusList = () => {
        let {json} = this.props;
        if (JSON.stringify(json) !== '{}') {
            let attendanceStatusList = [{
                key: 'all',
                label: '异常', // 全部
            }, {
                key: '-1',
                label: '出差', // '自由态'
            }, {
                key: '3',
                label: '休假', // 提交
            }, {
                key: '2',
                label: '加班', // 审批进行中
            }, {
                key: '1',
                label: '正常', // 审批通过
            }
            ]
            return attendanceStatusList;
        }
    }

    // 获取选择范围状态列表内容
    getOrderStatusList = () => {
        let {lang} = this.props.deptStat;
        if (JSON.stringify(lang) !== '{}') {
            let orderStatusList = [{
                key: 'all',
                label: lang['hrkq-0000049'], // 全部
            }, {
                key: '-1',
                label: lang['hrkq-0000097'], // '自由态'
            }, {
                key: '3',
                label: lang['hrkq-0000054'], // 提交
            }, {
                key: '2',
                label: lang['hrkq-0000055'], // 审批进行中
            }, {
                key: '1',
                label: lang['hrkq-0000056'], // 审批通过
            }, {
                key: '0',
                label: lang['hrkq-0000057'], // 审批未通过
            }
            ]
            return orderStatusList;
        }
    }
    headerChange = (type) => {
        let data = this.state
        return (value) => {
            // debugger
            switch (type) {
                case 'leave':
                    data.pk_leave_type = value
                    break;
                case 'report':
                    if(value) {
                        data.report = value
                    } else {
                        data.report = ""
                    }
                    break;
                case 'source':
                    data.billSource = value
                    break;
                case 'approve':
                    data.approveStatus = value
                    break;
                case 'trip':
                    data.tripType = value
                    data.triptypeid = value.refpk
                    break;
                case 'isrevoked':
                    if(value) {
                        data.isrevoked = value
                    } else {
                        data.isrevoked = ""
                    }
                    break;
                case 'isIncludeDisabledDept':
                    data.isIncludeDisabledDept = value
                    
                    break;
                case 'attendanceStatus':
                    data.attendanceStatus = value
                    break;
                case 'plan':
                    data.schemeId = value
                    break;
            }
            this.setState(data,()=>{
                console.log(this.state)
            })
        }
    }
    changeSearch = (val) => {
        this.setState({searchVal: val})
    }
    onBeginDateChange = (val) => {
        this.setState({beginDate: val})
    }
    onEndDateChange = (val) => {
        this.setState({endDate: val})
    }
    onMonthChange = (val) => {
        this.setState({monthDate: val.format('YYYY-M')})
    }
    onSearch = (isResearch) => {
        const onSearchEmit = this.props.onSearchEmit;
        let {
            beginDate,
            endDate,
            searchVal,
            pk_leave_type,
            report,
            billSource,
            attendanceStatus,
            isrevoked,
            isIncludeDisabledDept,
            triptypeid,
            tripType,
            monthDate,
            schemeId,
            approveStatus,
            isIncludeSub,
            headerSearch,
            jobVal
        } = this.state;
        let jobId = ''
        if (typeof (jobVal) === 'object') {
            jobId = jobVal.map(job => {
                return job.refpk
            }).join(',')
        }
        switch (this.props.type) {
            case 'one':
                onSearchEmit({
                    search: searchVal,
                    pk_leave_type,
                    report,
                    schemeId,
                    isIncludeDisabledDept,
                    billSource,
                    isIncludeSub,
                    approveStatus,
                    monthDate,
                    isResearch
                });
                break;
            case 'range':
                onSearchEmit({search: searchVal, beginDate,isIncludeDisabledDept,isIncludeSub, schemeId,attendanceStatus,endDate, jobId, isResearch});
                break;
            case 'leave':
                // data.pk_leave_type= value
                // searchVal 编码，pk_leave_type请假类型 billSource：单据来源 report是否销假
                onSearchEmit({
                    search: searchVal,
                    pk_leave_type,
                    report,
                    billSource,
                    isIncludeSub,
                    approveStatus,
                    monthDate,
                    beginDate,
                    endDate,
                    isResearch
                });
                break;
            case 'trip':
                // data.report = value
                onSearchEmit({search: searchVal, triptypeid, isIncludeSub,isrevoked, beginDate, endDate, isResearch,tripType:tripType});
                break;
            case 'overtime':
                // data.billSource = value
                onSearchEmit({search: searchVal, beginDate, isIncludeSub,endDate, isResearch});
                break;
        }

    }
    onExport = () => {
        const exportData = this.props.exportData;
        let {beginDate, endDate, searchVal,schemeId, monthDate, isIncludeDisabledDept,jobVal} = this.state;
        let jobId = ''
        let scheme = schemeId?schemeId:this.props.schemeList.length?this.props.schemeList[0].id:''
        if (typeof (jobVal) === 'object') {
            jobId = jobVal.map(job => {
                return job.refpk
            }).join(',')
        }
        if (this.props.type === 'one') {
            exportData(searchVal, monthDate, jobId,scheme,isIncludeDisabledDept);
            
        } else {
            exportData(searchVal, beginDate, endDate, jobId,scheme,isIncludeDisabledDept);
        }
    }

    checkChanged = async () => {
        await this.setState({isIncludeSub: !this.state.isIncludeSub});
        this.onSearch()
    }

    componentDidMount() {
        const {emitter, emitType} = this.props;
        emitter && emitter.addListener('searchData:' + emitType, this.onSearch)
    }

    componentWillUnmount() {
        const {emitter, emitType} = this.props;
        emitter && emitter.removeListener('searchData:' + emitType, this.onSearch)
    }
};
